<template>
    <div id="myorder">
        <div class="header">
            <i class="iconfont">&#xe601;</i>
            <span>确认订单</span>
        </div>
        <div class="address">
            <span>请选择收货地址</span>
            <i class="iconfont">&#xe601;</i>
        </div>
        <div class="goodslist">
            <h2>月付商品</h2>
            <div class="firstlist">
                <van-card num="2" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                    <template #title>
                        <p class="txt"><span>随用随还</span>惠普(HP) 星系列青春版14S 2020 14英寸笔记本电脑(i5-10210U/8G/256G
                            SSD/核显/1920*1080 IPS/Win10 家庭版)
                        </p>
                    </template>
                    <template #desc>
                        <i class="con">到期归还易点云，服务期满24个月后可免费随时退还，未满24个月退还需缴纳服务费</i>
                    </template>
                    <template #price>
                        <span>保证金：</span>
                        <i>￥3100</i>
                    </template>

                </van-card>
                <div class="bot">
                    <input type="checkbox"><span>使用费从保证金扣</span>
                </div>
                 <ul class="time">
                       <li>
                           <span>使用费</span>
                           <i class="color">￥114.39</i>
                           <em>（首付期数：1/36)</em>
                           <span class="num">
                               x2
                           </span>
                       </li>
                       <li>
                           <span>启用日期：</span>
                           <i>2021-09-14</i>
                       </li>
                 </ul>
            </div>



        </div>
        <div class="group">
            <div class="sub-title">订单备注</div>
            <input type="text" placeholder="选填，此处填写您对订单的其他要求">
        </div>
        <div class=" gp">
           <div class="sub-title">支付方式：</div>
           <div class="payment">
             <van-radio-group v-model="radio"    direction="horizontal" class="van">
                <van-radio name="1" class="n1">在线支付</van-radio>
                <van-radio name="2" class="n2">货到付款</van-radio>
             </van-radio-group>
           </div>
        </div>
        <div class="info">
            <ul>
                <li>
                  <span>应付保证金</span>
                  <i>￥</i>
                </li>
                <li>
                  <span>应付使用费</span>
                  <i>￥</i>
                </li>
                <li>
                  <span>免保证金抵扣</span>
                  <i class="col">￥</i>
                </li>
                <li>
                  <span>增值保障</span>
                  <i>￥</i>
                </li>
                <li class="li-5">
                  <span>应付总额</span>
                  <i>￥</i>
                </li>
                <li>
                  <span>当前需付</span>
                  <i class="col">￥</i>
                </li>
            </ul>
        </div>
        <div class="terms-item">
            <div class="item">
                <span data-v-48838f84="" class="terms">我已阅读并同意</span> 
                <a data-v-48838f84="" href="/wap/order/rent-agreement" class="item-router">《易点云服务合作协议》</a>
            </div>
            <van-checkbox v-model="checked"></van-checkbox>
        </div>
        <div class="bnt">
            <button>提交订单</button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        Card
    } from 'vant';
    import { RadioGroup, Radio } from 'vant';
    import { Checkbox, CheckboxGroup } from 'vant';
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(Card);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);

    

    export default {
        data() {
            return {
                radio: '1',
                checked: true,
            }
        },
    }
</script>

<style lang='css' src='../assets/font/iconfont.css' scoped></style>
<style lang='css' src='../assets/css/order.css' scoped></style>




<style lang="less" scoped>

</style>